import React, { Component } from 'react';
import './loading.scss';
import Animated from 'animated/lib/targets/react-dom';

/*
用法
引入 <Loading ref="loading"></Loading>

this.refs.loading.show()
this.refs.loading.hide()
*/

class Loading extends Component {
  constructor (...args) {
    super(...args);
    this.state = {
      show: true
    }
  }
  show () {
    this.setState({show: true});
  }
  hide () {
    this.setState({show: false});
  }
  render() {
    return (
      <div>
        {
          this.state.show ? (
            <div className="loading">
              <div className="mask">
                <div className="fruit">
                  <div className="wrapper">
                    {/* 1 */}
                    <div className="icon icon-1">
                      <span></span>
                    </div>
                    {/* 2 */}
                    <div className="icon icon-2">
                      <span></span>
                    </div>
                    {/* 3 */}
                    <div className="icon icon-3">
                      <span></span>
                    </div>
                    {/* 4 */}
                    <div className="icon icon-4">
                      <span></span>
                    </div>
                  </div>
                  <div className="text">正在加载中...</div>
                </div>
              </div>
            </div>
          ) : ''
        }
      </div>
    );
  }

}

export default Loading;
